import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///电梯导航item
class ElevatorNavItem extends StatefulWidget {
  ///电梯导航配置
  final Map<String, dynamic> info;

  ///导航item
  final Map<String, dynamic> item;

  ///自身索引
  final int index;

  ///激活索引
  final int curIndex;

  ///导航可用总宽度
  final double useWidth;

  ///点击事件
  final VoidCallback? callback;

  const ElevatorNavItem(
      {super.key,
      required this.info,
      required this.item,
      this.index = 0,
      this.curIndex = 0,
      this.callback,
      this.useWidth = 355});

  @override
  State<StatefulWidget> createState() {
    return _ElevatorNavItemState();
  }
}

class _ElevatorNavItemState extends State<ElevatorNavItem> {
  @override
  Widget build(BuildContext context) {
    return getBox();
  }

  ///获取容器样式
  Widget getBox() {
    switch (widget.info['show_method']) {
      case 1: //图文型
        return BaseInteractive(
          childWidget: Column(
            children: [
              BaseImage(
                url: widget.item['image_url'],
                width: 50,
                height: 50,
              ),
              SizedBox(
                height: 10.h,
              ),
              Text(
                widget.item['title'],
                style: TextStyle(
                    color: widget.index == widget.curIndex
                        ? Tools.fromHex(widget.info['font_default_color'])
                        : Tools.fromHex(widget.info['font_active_color'])),
              ),
            ],
          ),
          onClick: () {
            if (widget.callback != null) {
              widget.callback!();
            }
          },
        );
      case 2: //图片型
        return BaseInteractive(
          childWidget: BaseImage(
            url: widget.item['image_url'],
            width: 50,
            height: 50,
          ),
          onClick: () {
            if (widget.callback != null) {
              widget.callback!();
            }
          },
        );
      case 0: //文字型
      default:
        return BaseInteractive(
          childWidget: getTextStyle(),
          onClick: () {
            if (widget.callback != null) {
              widget.callback!();
            }
          },
        );
    }
  }

  ///获取文本型样式
  Widget getTextStyle() {
    switch (widget.info['navigation_type']) {
      case 1: //圆框
        return Container(
          width: getItemWidth(),
          decoration: BoxDecoration(
              color: widget.index == widget.curIndex
                  ? Tools.fromHex(widget.info['type_color'])
                  : Tools.fromHex(widget.info['background_color']),
              borderRadius: const BorderRadius.all(Radius.circular(40))),
          alignment: Alignment.center,
          child: Text(
            widget.item['title'],
            style: TextStyle(
                color: widget.index == widget.curIndex
                    ? Tools.fromHex(widget.info['font_default_color'])
                    : Tools.fromHex(widget.info['font_active_color'])),
          ),
        );
      case 2: //方框
        return Container(
          width: getItemWidth(),
          decoration: BoxDecoration(
              color: widget.index == widget.curIndex
                  ? Tools.fromHex(widget.info['type_color'])
                  : Tools.fromHex(widget.info['background_color']),
              borderRadius: const BorderRadius.all(Radius.circular(2))),
          alignment: Alignment.center,
          child: Text(
            widget.item['title'],
            style: TextStyle(
                color: widget.index == widget.curIndex
                    ? Tools.fromHex(widget.info['font_default_color'])
                    : Tools.fromHex(widget.info['font_active_color'])),
          ),
        );
      case 3: //下划线
        return Container(
          width: getItemWidth(),
          height: 22.h,
          alignment: Alignment.center,
          child: Stack(
            children: [
              Text(
                widget.item['title'],
                style: TextStyle(
                    color: widget.index == widget.curIndex
                        ? Tools.fromHex(widget.info['font_default_color'])
                        : Tools.fromHex(widget.info['font_active_color'])),
              ),
              Positioned(
                  bottom: 0,
                  child: Container(
                    width: getTextWidth(),
                    height: 1.h,
                    color: widget.index == widget.curIndex
                        ? Tools.fromHex(widget.info['type_color'])
                        : Colors.transparent,
                  ))
            ],
          ),
        );
      case 0: //背景
      default:
        return Container(
          width: getItemWidth(),
          height: 22.h,
          alignment: Alignment.center,
          color: widget.index == widget.curIndex
              ? Tools.fromHex(widget.info['type_color'])
              : Tools.fromHex(widget.info['background_color']),
          child: Text(
            widget.item['title'],
            style: TextStyle(
                color: widget.index == widget.curIndex
                    ? Tools.fromHex(widget.info['font_default_color'])
                    : Tools.fromHex(widget.info['font_active_color'])),
          ),
        );
    }
  }

  ///获取item宽度
  double getItemWidth() {
    return widget.useWidth / (widget.info['sub_entry'] as List).length;
  }

  ///计算文本宽度
  double getTextWidth() {
    double initFontSize = 12;
    double initWidth = initFontSize + 3;
    return initWidth * (widget.item['title'] as String).length;
  }
}
